
<template>
  <table cellspacing="0" cellpadding="2" border="1">
    <tr>
      <th>Id</th>
      <th>订单编号</th>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
      <th>操作</th>
    </tr>

    <tr v-for="(item,index) in goodList":key="item.id">
      <td>{{item.id}}</td>
      <td>{{ item.orderno }}</td>
      <td>{{item.goodName}}</td>
      <td>{{ item.price }}</td>
      <td>
        <button v-if="item.number>=1" @click="minus(index)">-</button>
        {{item.number}}
        <button @click="add(index)">+</button>
      </td>
      <td>{{ item.price * item.number }}元</td>
      <td>
        <button @click="del(index)">删除</button></td>
    </tr>
    <tr>
      <td>总购买价格</td>
      <td colspan="5">
        {{total}}元
      </td>
      <td><button @click="clear()">清空</button></td>
    </tr>

  </table>
</template>

<script lang="ts" setup>

import {computed, ref} from "vue";

  let goodList=ref([
    {id:1,orderno:'fn001',goodName:'ios',price:100,number:2},
    {id:2,orderno:'fn002',goodName:'ios',price:120,number:2},
    {id:3,orderno:'fn003',goodName:'ios',price:10,number:2}
  ])
  function deleteItem(index: number) {
    goodList.value.splice(index,  1)
  }
  const del=(index:number)=>{
    if (confirm("确定删除吗?"))
      goodList.value.splice(index,1)
  }

  let total1 = ref(460)


  function add(index: number){
    goodList.value[index].number++
    calculateTotal()
  }
  function minus(index:number){
    goodList.value[index].number--
    calculateTotal()
  }
  function calculateTotal() {
    let sum = 0
    for(let i = 0; i < goodList.value.length;  i++) {
      sum += goodList.value[i]. price * goodList.value[i].number
    }
    total1.value  = sum
  }

  const total=computed(()=>{
    let sum=0;
    goodList.value.forEach(item=>{
      sum+=item.price*item.number
    })
    return sum
  })
  function clear(){
    if (confirm("确定清空吗?"))
      goodList.value=[]
  }
</script>

<style>

</style>